<template>
	<view>
		<u-navbar placeholder :autoBack="true" title="预订门票"></u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight, backgroundColor: '#f5f5f5'}">
			<template v-if="loading">
				<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar
					rows="3" v-for="i in 7" :key="i"></u-skeleton>
			</template>
			<template v-else>
				<u-swiper radius="0" :list="info.image && info.image.split(',')" indicator indicatorMode="line" circular
					height="260" @click="swiperClick"></u-swiper>
				<view class="ticket-info">
					<view class="ticket-title">
						<view style="display: flex;align-items: center;">
							<text class="ticket-text">{{info.name}}</text>
							<text @click="toDetail" class="ticket-tag"
								:style="{color: appColor, backgroundColor: appColor + '33'}">查看详情</text>
						</view>
						<text @click="toPhone" style="font-size: 36rpx;color: #333;font-weight: bold;"
							class="iconfont icon-dianhua"></text>
					</view>
					<view class="ticket-tags">
						<text v-for="(item, index) in info.tag && info.tag.split(',')" :key="index" class="ticket-tag"
							:style="{color: appColor, backgroundColor: appColor + '33'}">{{item}}</text>
					</view>
					<view style="height: 32rpx;" />
					<view class="ticket-cell" @click="open('time')">
						<text style="color: #000;font-weight: bold;" class="ticket-l iconfont icon-shijian1"></text>
						<view class="ticket-m u-line-1">开园时间</view>
						<text style="color: #000;font-weight: bold;font-size: 32rpx;"
							class="ticket-r iconfont icon-youjiantou"></text>
					</view>
					<view class="ticket-cell" @click="openMap">
						<text style="color: #000;font-weight: bold;"
							class="ticket-l iconfont icon-shouhuodizhi1"></text>
						<view class="ticket-m u-line-1">{{info.address}}</view>
						<text style="color: #000;font-weight: bold;font-size: 28rpx;"
							class="ticket-r iconfont icon-daohang"></text>
					</view>
					<view class="ticket-cell" @click="open('fy')" style="margin-bottom: 0;">
						<text style="color: #f40215;font-weight: bold;" class="ticket-l iconfont icon-gonggao"></text>
						<view class="ticket-m u-line-1" style="color: #f40215;">【防疫政策】见详情 <text
								style="padding-left: 8rpx;">👉</text></view>
						<text style="color: #f40215;font-weight: bold;font-size: 32rpx;"
							class="ticket-r iconfont icon-youjiantou"></text>
					</view>
				</view>
				<view style="padding: 32rpx;background-color: #fff;">
					<scroll-view :scroll-x="true" style="width: 100%;white-space: nowrap; display: flex;">
						<view @click="changeTag(item)" class="type-tag"
							:style="{marginRight: index === tagList.length-1 ? 0 : '16rpx', backgroundColor: curTag === item.id ? appColor+'33' : '#f5f5f5', color: curTag === item.id ? appColor : '#333',borderColor: curTag === item.id ? appColor : '#f5f5f5',}"
							v-for="(item) in tagList" :key="item.id">{{item.name}}</view>
					</scroll-view>
					<view style="height: 16rpx;" />
					<view style="background-color: #f5f5f5;padding: 16rpx 32rpx;border-radius: 8rpx;">
						<template v-if="dataList.length === 0">
							<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
							</u-empty>
						</template>
						<template v-else-if="dataList.length > 0">
							<view @click="showDetail(item)"
								:class="['ticket-item', index === dataList.length-1 ? null : 'u-border-bottom']"
								v-for="(item, index) in dataList" :key="index">
								<view class="ticket-item-title">
									<view class="ticket-item-title-l">{{item.name}}</view>
									<view class="ticket-item-title-r">
										<text
											style="text-decoration: line-through;color: #999;font-size: 28rpx;padding-right: 16rpx;">&yen;{{item.oldPrice}}</text>
										<text :style="{color: appColor}">&yen;</text>
										<text :style="{fontSize: '42rpx', color: appColor}">{{item.price}}</text>
										<text>起</text>
									</view>
								</view>
								<view class="ticket-item-title1">
									<view style="display: inline-block;margin-right: 16rpx;margin-bottom: 16rpx;"
										v-if="item.coupon">
										<u-tag :borderColor="appColor" :color="appColor" :text="item.coupon.name" plain
											size="mini" type="warning" />
									</view>
									<view style="display: inline-block;margin-right: 16rpx;margin-bottom: 16rpx;"
										v-for="(item1, index1) in item.tag_dictText.split(',')" :key="index1">
										<u-tag :borderColor="appColor" :color="appColor" :text="item1" plain size="mini"
											type="warning" />
									</view>
									<view style="display: inline-block;">
										<u-tag :text="item.isRefund === '0' ? '不可退' : '可退'" plain size="mini"
											type="error" />
									</view>
								</view>
								<view class="ticket-item-title2">
									<view class="ticket-item-title2-l">
										<text>门票详情</text>
										<text class="iconfont icon-youjiantou"></text>
									</view>
									<view :style="{backgroundColor: appColor}" class="ticket-item-title2-r">预订</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</template>
		</scroll-view>
		<u-popup closeable :closeOnClickOverlay="false" :show="show" @close="close" :round="10">
			<view class="popup-title">{{popupTitle}}</view>
			<scroll-view :scroll-y="true" style="height: 460rpx;">
				<view style="padding: 32rpx;">
					<u-parse :content="popupContent"></u-parse>
				</view>
			</scroll-view>
		</u-popup>
		<u-popup closeable :closeOnClickOverlay="false" :show="showBuyInfo" @close="closeBuyInfo" :round="10">
			<view class="popup-title1">
				<u--image @click="ticketClick" radius="8rpx" mode="aspectFill" :src="curItem.image && curItem.image.split(',')[0]" width="140rpx" height="140rpx">
				</u--image>
				<view
					style="height: 140rpx;display: flex;flex-direction: column;justify-content: space-between;margin-left: 32rpx;">
					<text style="font-size: 32rpx;color: #000;">{{curItem.name}}</text>
					<text style="font-size: 28rpx;color: #666;">{{curItem.tag_dictText}}</text>
				</view>
			</view>
			<view style="padding: 0 32rpx;">
				<view class="u-border-bottom"></view>
			</view>
			<scroll-view :scroll-y="true" style="height: 660rpx;">
				<view style="padding: 0 32rpx;">
					<view style="padding: 32rpx 0;font-size: 32rpx;color: #000;">游玩日期</view>
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view @click="changeDay(item)"
							:style="{marginRight: index === dayList.length-1 ? 0 : '16rpx', backgroundColor: curDay === item.id ? appColor+'33' : '#f5f5f5', color: curDay === item.id ? appColor : '#333',borderColor: curDay === item.id ? appColor : '#f5f5f5',}"
							class="day u-border" v-for="(item, index) in dayList" :key="index">
							<view style="margin-bottom: 8rpx;">{{item.weekTime}}</view>
							<view>{{item.ticketTime}}</view>
						</view>
						<view class="day u-border" @click="more">
							<view style="margin-bottom: 8rpx;">更多</view>
							<view>日期</view>
						</view>
					</view>
					<!-- <scroll-view :scroll-x="true" style="width: calc(100vw - 64rpx);white-space: nowrap; display: flex;">
						<view @click="changeDay(item)" :style="{marginRight: index === dayList.length-1 ? 0 : '16rpx', backgroundColor: curDay === item.id ? appColor+'33' : '#f5f5f5', color: curDay === item.id ? appColor : '#333',borderColor: curDay === item.id ? appColor : '#f5f5f5',}" class="day" v-for="(item, index) in dayList" :key="index">
							<view style="margin-bottom: 8rpx;">{{item.weekTime}}</view>
							<view>{{item.ticketTime}}</view>
						</view>
					</scroll-view> -->
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view style="padding: 32rpx 0;font-size: 32rpx;color: #000;">购买数量</view>
						<view>
							<u-number-box integer disabledInput v-model="number" :max="curItem.limitNum"></u-number-box>
						</view>
					</view>
				</view>
				<view style="height: 16rpx;background-color: #f5f5f5;"></view>
				<view style="padding: 0 32rpx;">
					<view style="padding: 32rpx 0;font-size: 32rpx;color: #000;">购票须知</view>
					<view class="buy-notice" v-for="(item, index) in curItem.notice" :key="index">
						<view class="buy-notice-l">{{item.name}}</view>
						<view class="buy-notice-r">{{item.content}}</view>
					</view>
				</view>
				<view style="height: 16rpx;background-color: #f5f5f5;"></view>
				<view style="padding: 0 32rpx;">
					<view style="padding: 32rpx 0;font-size: 32rpx;color: #000;">门票介绍</view>
					<view>
						<u-parse :content="curItem.introduce"></u-parse>
					</view>
					<view style="height: 32rpx;background-color: #fff;"></view>
				</view>
				<view style="height: 16rpx;background-color: #f5f5f5;"></view>
			</scroll-view>
			<view class="u-border-top"
				style="padding: 32rpx; display: flex;justify-content: space-between;align-items: center;">
				<view>
					<text :style="{color: appColor}">&yen;</text>
					<text :style="{fontSize: '42rpx', color: appColor}">{{totalPrice | moneyFormat}}</text>
				</view>
				<view @click="toBuy" :style="{backgroundColor: appColor, opacity: isBuy ? 1 : 0.5}"
					class="ticket-item-title2-r">{{isBuy ? '预订' : '已售罄'}}</view>
			</view>
		</u-popup>
		<template v-if="showCalendar">
			<u-calendar :defaultDate="defaultDateMultiple" :monthNum="2" @close="handleClose" @confirm="handleConfirm" :formatter="formatter" :color="appColor" :show="showCalendar"></u-calendar>
		</template>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	import {
		ticketSetUp,
		ticket,
		ticketDate
	} from '@/api/home.js';
	import {formatTime, timeFormat} from '@/utils/index.js'
	
	let ticketDateList = null;
	
	export default {
		data() {
			return {
				info: {},
				number: 1,
				showBuyInfo: false,
				show: false,
				dataList: [], // 认养列表
				loading: false,
				popupTitle: '',
				popupContent: '',
				curTag: '',
				dayList: [],
				curDay: '',
				curItem: {},
				cur: {},
				isBuy: true,
				showCalendar: false,
				ticketDateList: [],
				defaultDateMultiple: []
			}
		},
		computed: {
			...mapState(['ticketCategory']),
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			},
			tagList() {
				return this.ticketCategory
			},
			totalPrice() {
				return this.number * (this.cur.price || 0)
			}
		},
		onLoad() {
			let curTag = this.ticketCategory[0].id;
			this.curTag = curTag;
			this.loading = true
			ticketSetUp().then(res => {
				this.info = res.result;
			}).finally(() => {
				setTimeout(() => {
					this.loading = false;
				}, 500)
			})
			this.getTicket(curTag);

		},
		methods: {
			...mapActions(['setDetail']),
			handleConfirm(e) {
				let index = ticketDateList.findIndex(item => item.ticketTime === e[0]);
				this.dayList = ticketDateList.slice(index, index+3);
				this.curDay = ticketDateList[index].id;
				this.defaultDateMultiple = [ticketDateList[index].ticketTime]
				this.showCalendar = false;
			},
			handleClose() {
				this.showCalendar = false;
			},
			more() {				
				this.showCalendar = true
			},
			formatter(day) {
				let dateTime = new Date(day.date).getTime();
				let date = timeFormat(dateTime, 'yyyy-mm-dd');
				let res = ticketDateList.find(item => item.ticketTime === date);
				if (res) {
					day.bottomInfo = res.price + '元'
				}
				return day
			},
			toPhone() {
				const {
					telephone: phoneNumber
				} = this.info
				uni.makePhoneCall({
					phoneNumber
				})
			},
			// 查看详情
			toDetail() {
				let url = '/pageDiamond1/scenicArea/index';
				uni.navigateTo({
					url
				})
			},
			getTicket(id) {
				this.$cuLoading().then(() => {
					ticket({
						pageNo: 1,
						pageSize: 100,
						category: id
					}).then(res => {
						this.dataList = res.result.records;
					}).finally(() => {
						uni.hideLoading();
						this.loading = false;
					})
				})

			},
			showDetail(item) {
				this.curItem = item;
				this.$cuLoading().then(() => {
					ticketDate({ticketId: item.id}).then(res => {
						ticketDateList = res.result;
					}).finally(() => {
						uni.hideLoading();
					})
				})
				this.showBuyInfo = true;
				this.dayList = item.ticketDateList.slice(0, 3);
				let id = item.ticketDateList[0].id;
				this.curDay = id
				let cur = this.dayList.find(item => item.id === id);
				this.defaultDateMultiple = [cur.ticketTime]
				this.cur = cur;
				if (cur) {
					this.isBuy = cur.stock > 0;
				} else {
					this.isBuy = false
				}
			},
			ticketClick() {
				this.previewImg(0, this.curItem.image)
			},
			swiperClick(index) {
				this.previewImg(index, this.info.image)
			},
			// 预览图片
			previewImg(current, urls) {
				urls = urls.split(',');
				uni.previewImage({
					current,
					urls,
				});
			},
			openMap() {
				const [latitude, longitude] = this.info.latLng.split(',');
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude)
				})
			},
			toBuy() {
				if (!this.isBuy) {
					return this.$cuTip('门票已售罄, 请选择其他日期');
				}
				let url = '/pageDiamond1/tickets/ticketsConfirm';
				let {
					ticketTime,
					weekTime
				} = this.dayList.find(item => item.id === this.curDay);
				let detail = Object.assign(this.curItem, {
					play_number: this.number,
					play_time: ticketTime,
					week_time: weekTime
				});
				this.setDetail({
					detail
				});
				this.$cuNavigateTo(url);
			},
			changeTag({
				id
			}) {
				this.curTag = id;
				this.getTicket(id)
			},
			changeDay({
				id
			}) {
				this.curDay = id;
				let cur = this.dayList.find(item => item.id === id);
				this.cur = cur;
				this.defaultDateMultiple = [cur.ticketTime]
				if (cur) {
					this.isBuy = cur.stock > 0;
				} else {
					this.isBuy = false
				}
			},
			open(type) {
				if (type === 'time') {
					this.popupTitle = '开园时间';
					this.popupContent = this.info.openingHours
				} else {
					this.popupTitle = '防疫政策';
					this.popupContent = this.info.policy
				}
				this.show = true;
			},
			close() {
				this.show = false
				// console.log('close');
			},
			closeBuyInfo() {
				this.showBuyInfo = false
			},
		}
	}
</script>


<style>
	.u-calendar-month__days__day__select__buttom-info{
		color: #f40215!important;
	}
</style>
<style lang="scss" scoped>
	.buy-notice {
		display: flex;
		padding: 16rpx 0;

		.buy-notice-l {
			width: 240rpx;
			color: #666;
		}

		.buy-notice-r {
			flex: 1;
			color: #000;
		}
	}

	.popup-title {
		font-size: 32rpx;
		color: #333;
		text-align: center;
		padding: 32rpx 0;
	}

	.popup-title1 {
		padding: 32rpx;
		display: flex;
		align-items: center;
	}

	.day {
		display: inline-block;
		text-align: center;
		color: #333;
		font-size: 28rpx;
		padding: 8rpx;
	}

	.ticket-info {
		padding: 32rpx;
		background-color: #fff;
		margin-bottom: 16rpx;

		.ticket-title {
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ticket-text {
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
			}

			.ticket-tag {
				border-radius: 4rpx;
				font-size: 24rpx;
				padding: 2rpx 8rpx;
				margin-right: 16rpx;
				margin-left: 16rpx;
			}
		}

		.ticket-tags {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.ticket-tag {
				border-radius: 8rpx;
				font-size: 24rpx;
				padding: 2rpx 8rpx;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
			}
		}

		.ticket-cell {
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-bottom: 32rpx;
			color: #333;

			.ticket-m {
				flex: 1;
				padding: 0 16rpx;
				font-size: 28rpx;
			}
		}
	}

	.type-tag {
		display: inline-block;
		font-size: 28rpx;
		padding: 16rpx 32rpx;
		border-radius: 42rpx;
		border-style: solid;
		border-width: 2rpx;
	}

	.ticket-item {
		padding: 16rpx 0;

		.ticket-item-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ticket-item-title-l {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.ticket-item-title-r {
				font-size: 24rpx;
			}
		}

		.ticket-item-title2 {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ticket-item-title2-l {
				color: #666;
				font-size: 24rpx;
			}
		}
	}

	.ticket-item-title2-r {
		padding: 8rpx 42rpx;
		font-size: 30rpx;
		color: #fff;
		border-radius: 4rpx;
	}
</style>
